<template>
    <div class="groupStock_page">
      <van-nav-bar
        title="集团股份"
        left-arrow
        @click-left="$router.push('/mine')"
      >
<!--        <template #right >
          <van-icon name="ellipsis" size="18" @click="changeList"/>
        </template>-->
      </van-nav-bar>

      <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
        <van-cell-group class='layer'>
          <van-cell value="了解集团股份"  @click="$router.push('/groupStock/understandGroup')"/>
          <van-cell value="常见问题"  @click="$router.push('/groupStock/question')"/>
        </van-cell-group>
      </van-overlay>

      <!-- <com-header :comHeaderObj="headerObj"></com-header> -->


      <van-cell-group class="stock_list" v-if="stockList.length > 0">
        <van-cell
          v-for="item in stockList"
          :key="item.id"
          :title="item.name"
          is-link
          class="stock_item"
          @click="toStockDetail(item)"
          />
      </van-cell-group>


  </div>
</template>

<script>
  import comHeader from '../../components/comHeader';
  export default {
    name: 'groupStock',
    components: {
      comHeader
    },
    data(){
      return {
        showOverlay: false,
        stockList: [],
        // 用户股份账户
        userStockAccount: {},
        headerObj: {
          title: '总资本',
          money: 0,
          leftBtnText: '提现',
          leftBtnPath: '/cash/reflect',
          middleBtnText: '总记录',
          middleBtnPath: '/groupStock/generalRecord',
          rightBtnText: '资本充值',
          rightBtnPath: '/reCharge',
          // 提现标识：申请借支的页面
          cashOutSign: 'groupStock',
        },
      }
    },

    mounted(){
      this._getAccountAndStockList()
    },
    methods:{

      async _getAccountAndStockList(){
        const res =  await this.$api.stock.reqUserAccountAndStockList()
        if (res.code === 200){
          this.stockList = res.data.stocklist
          this.userStockAccount = res.data.info
          this.headerObj.money = res.data.info.caip
        }
      },
      toStockDetail(item){
        this.$router.push({
          name: 'stockMarket',
          params: {
            item: JSON.stringify(item)
          },
          query: {
            item: JSON.stringify(item)
          }
        })
      },
      changeList(){
        this.showOverlay =true;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .groupStock_page{
    width: 100%;
    .over_layer{
      margin-top: 46px;
      height: 100%;
      .layer{
        width: 50%;
        font-size: 14px;
        position: absolute;
        right: 0;
        z-index: 2;
      }
    }
    .head {
      height: 100px;
      width:150px;
      border-radius: 50%;
      color: #fff;
      background-color:#0099FF;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 30px auto;
    }

  }
</style>
